<style lang="scss">
.mirror-style {
  .vue-code-mirror__con {
    max-height: 600px;
    overflow: auto;
  }
}
.cus-dialog-cls {
  .detail-com-custom {
    .crud-detail-com__key {
      width: 120px;
    }
  }
}
//.z-crud-table {
//  --warning-row-bg: #ff00ff;
//  .el-table tr.warning-row {
//    background-color: var(--warning-row-bg);
//  }
//  .el-table--striped .el-table__body tr.warning-row td.el-table__cell {
//    background-color: var(--warning-row-bg);
//  }
//}
</style>

<template>
  <div class="page-crud">

    <z-space vertical>
      <z-crud-table :obj="obj"
                    :on-init="onCurdInit"
                    :on-delete="onCurdDelete"
                    :add-com="obj.EditCom"
                    :edit-com="obj.EditCom"
                    :rowClassName="rowClassName"
      >
        <template #content="scope">
          <div class="app-scrollbar" style="height: 100px; overflow: auto; word-break: break-all;">
            {{scope.item.id}}
            <div>{{scope.columns}}</div>
            <div style="height: 120px;">{{scope.getColumnItem(scope.item)}}</div>
          </div>
        </template>
        <template #detail_view="scope">
          <div>
            <zw-layout class="crud-detail-com__row" row v-for="(value, key) in scope.row">
              <template v-if="scope.findColumnDefByKey(key, 'label')">
                <zw-layout class="crud-detail-com__key">{{scope.findColumnDefByKey(key, 'label')}}</zw-layout>
                <zw-layout class="crud-detail-com__value" expand>{{value}}</zw-layout>
              </template>
            </zw-layout>
            <div>
              <el-button @click="scope.sendCancel">关闭</el-button>
            </div>
          </div>
        </template>
      </z-crud-table>

      <h3>main</h3>
      <RemoteFileViewer file="example/views/datatable/crud.vue"></RemoteFileViewer>

      <p>obj定义</p>
      <RemoteFileViewer file="example/views/datatable/test.jsx"></RemoteFileViewer>

      <h3>属性</h3>
      <doc-props :data="doc.props"></doc-props>

      <h3>方法</h3>
      <doc-props :data="doc.methods" def-type="Methods"></doc-props>

      <h3>Slots</h3>
      <doc-props :data="doc.slots" def-type="Slots"></doc-props>

      <h3>CommonCurdDialgMixin</h3>
      <RemoteFileViewer file="src/zpkgs/components/z-datatable/CurdDialgMixin.js"></RemoteFileViewer>
    </z-space>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";

// import DetailCom from "@example/views/datatable/components/DetailCom";
// Vue.component(DetailCom.name, DetailCom)

// import EditCom from "@example/views/datatable/components/EditCom";

import {obj, onCurdInit, onCurdDelete} from "@example/views/datatable/test.jsx";
import ZCrudTable from "@/zpkgs/components/z-datatable/ZCrudTable";
import GridView from "@example/views/datatable/components/GridView";
import DocProps from "@example/plugins/example/components/DocProps";
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";

export default {
  components: {RemoteFileViewer, DocProps, ZCrudTable,  VueCodeMirror},
  data() {
    return {
      activeName: [],
      doc: {
        props: [
          {
            name: 'onInit',
            type: 'Function',
            defVal: 'null',
            desc: '当初始化时的调用'
          },
          {
            name: 'onDelete',
            type: 'Function',
            defVal: 'null',
            desc: '当删除时的调用'
          },
          {
            name: 'onEdit',
            type: 'Function',
            defVal: 'null',
            desc: '当编辑时的调用'
          }
        ],
        methods: [
          {
            name: 'table__detail',
            desc: '调用table打开detail组件方法',
            params: 'row, column, index, {scope}'
          },
          {
            name: 'table__edit',
            desc: '调用table打开edit组件方法',
            params: 'row, column, index, {scope}'
          },
          {
            name: 'table__add',
            desc: '调用table打开add组件方法',
            params: 'row, column, index, {scope}'
          },
          {
            name: 'table__delete',
            desc: '调用table打开delete组件方法',
            params: 'row, column, index, {scope}'
          },
          {
            name: 'table__search',
            desc: '调用table打开delete组件方法',
            params: '{params: {}}'
          }
        ],
        slots: [
          {
            name: 'z-crud-table__title',
            desc: '表哥title'
          },
          {
            name: 'z-crud-table__table__content_afterbegin'
          }
        ]
      }
    }
  },
  methods: {
    rowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  setup(props, ctx) {
    let def = {
      tpl: `<template>
   <z-crud-table :obj="obj"
                    :on-init="onCurdInit"
                    :on-delete="onCurdDelete"
                    :add-com="obj.EditCom"
                    :detail-com="obj.DetailCom"
                    :edit-com="obj.EditCom"
                    :rowClassName="rowClassName"
                    >
        <template #content="scope">
        <div class="app-scrollbar" style="height: 100px; overflow: auto; word-break: break-all;">
            {{scope.item.id}}
            <div>{{scope.columns}}</div>
            <div style="height: 120px;">{{scope.getColumnItem(scope.item)}}</div>
          </div>
        </template>
      </z-crud-table>
</template>`,
      js: `


export function formatter(row, column, cellValue, index, { from } = {}) {
  let h = vueCompositionAPI.h
  // return cellValue + 'SDSDS';
  return (<div><el-link>{cellValue}</el-link></div>);
  // let el = vueCompositionAPI.h
  // return  el('el-link', {
  //
  // }, cellValue)
}

export let obj = {
  defaultUrl: '/api/list',
  request: globalThis.Req,
  columnDefMap: {
    sourceDbName: {
      formatter
    },
     prop11: {
      search: {
        type: 'string',
        ui: {
          label: '测试',
          widget: 'CusInput'
        }
      }
    }
  }
}

export function onCurdInit(ctx) {
}

export async function onCurdDelete(ctx) {
  // console.log('onCurdDelete', ctx)
  await ctx.refs.searchTable.search()
  await ZY.sleep(10000)
}
    `,
      gridview: {
        scss: `
.grid-view2 {
  font-size: 14px;
  .grid-view-record {
    margin-bottom: 10px;
  }
}
        `,
        tpl: `
<div class="grid-view2">
  <div> <h3>{{columns}}</h3>{{columns}} <h3>rowKey</h3>{{rowKey}}</div>
  <div class="grid-view-record" v-for="record in data"> {{record}}</div>
</div>
        `,
        js:
`import {CurdHelper} from "pkg-exms/lib/ext";

export default CurdHelper.defineView({
  name: "GridView2",
  methods: {
  },
});
        `
      }
    }



    return {
      def,
      obj,
      onCurdInit,
      onCurdDelete,
    }
  }
}
</script>
